<template>
  <div class="app-container">
    <div class="manage-header">
      <el-form ref="Form" :inline="true" :model="Form" :rules="Rules">
        <el-form-item prop="name">
          <el-input v-model="Form.name" placeholder="请输入故障机组编号" :validate-event="false" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-button v-if="isShow1" type="primary" @click="getData">取消查询</el-button>
      </el-form>
    </div>
    <el-table
      stripe
      border
      height="450"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="faultTurbine"
        label="故障机组"
        width="100"
        align="center"
      />
      <el-table-column
        prop="faultName"
        label="故障名称"
        align="center"
      />
      <el-table-column
        prop="faultId"
        label="故障代码"
        align="center"
      />
      <el-table-column
        prop="faultType"
        label="故障类别"
        align="center"
      />
      <el-table-column
        prop="faultReportingTime"
        label="故障报出时间"
        align="center"
      />
      <el-table-column
        prop="faultLocationOne"
        label="故障位置"
        width="100"
        align="center"
      />
      <el-table-column
        prop="faultCause"
        label="故障原因"
        align="center"
      />
      <el-table-column
        prop="addr"
        label="操作"
        width="200"
        align="center"
      >
        <template v-slot="scope">
          <el-button size="medium" @click="handleDetail(scope.row)">安排维修</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title="维修安排表单"
      center
      :visible.sync="dialogVisible_detail"
      width="40%"
      top="5vh"
      :before-close="handleClose"
    >
      <el-form ref="form_detail" :rules="rules_detail" :model="form_detail" label-position="left">
        <el-form-item prop="maintenanceLevel" label="维修等级">
          <el-select v-model="form_detail.maintenanceLevel" placeholder="请选择维修等级" style="width: 80%">
            <el-option label="CAT0" value="CAT0" />
            <el-option label="CAT1" value="CAT1" />
            <el-option label="CAT2" value="CAT2" />
            <el-option label="CAT3" value="CAT3" />
          </el-select>
        </el-form-item>
        <el-form-item prop="maintenanceType" label="维修类别">
          <el-radio-group v-model="form_detail.maintenanceType" style="width: 80%">
            <el-radio label="日常维修" />
            <el-radio label="紧急维修" />
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="maintenanceAction" label="维修动作">
          <el-select v-model="form_detail.maintenanceAction" placeholder="请选择维修动作">
            <el-option label="更换" value="更换" />
            <el-option label="紧固" value="紧固" />
            <el-option label="清理" value="清理" />
            <el-option label="加注" value="加注" />
            <el-option label="修复" value="修复" />
          </el-select>
        </el-form-item>
        <el-form-item label="维修时间">
          <el-date-picker
            v-model="form_detail.date1"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 40%"
          />
          <el-time-picker
            v-model="form_detail.date2"
            placeholder="选择时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 40% "
          />
        </el-form-item>
        <el-form-item prop="maintenanceMan" label="维修人员">
          <el-select v-model="form_detail.maintenanceMan" placeholder="请选择维修人员">
            <el-option
              v-for="maintainer in maintainers"
              :key="maintainer.jobNumber"
              :label="maintainer.uname"
              :value="maintainer.jobNumber"
              style="width: 77%"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit_detail">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllFaultInfo, getNoFaultInfo, addMaintain, updateFaultManange } from '@/api/de_repair'
import { editMaintainer2, getAllMaintainerInfo } from '@/api/maintainer'

export default {
  data() {
    // const validateNum = (rule, value, callback) => {
    //   if (!(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
    //     callback(new Error('请输入数字值'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      maintainers: [],
      total: 1,
      pageSize: 1,
      isShow1: false,
      dialogVisible_detail: false,
      currentPage: 1,
      tableData: [],
      Form: {
        name: ''
      },
      Rules: {
        name: [
          { required: true, trigger: 'blur', message: '请输入机组编号' }
        ]
      },
      form_detail: {
        maintenanceTurbine: '',
        maintenanceLevel: '',
        maintenanceType: '',
        maintenanceAction: '',
        date1: '',
        date2: '',
        maintenanceTime: '',
        maintenanceMan: ''
      },
      rules_detail: {
        // 维修
        maintenanceLevel: [
          { required: true, message: '请选择维修等级', trigger: 'change' }
        ],
        maintenanceType: [
          { required: true, message: '请填写维修类别', trigger: 'blur' }
        ],
        date1: [
          { required: true, message: '请选择维修日期', trigger: 'change' }
        ],
        date2: [
          { required: true, message: '请选择维修时间', trigger: 'change' }
        ],
        maintenanceAction: [
          { required: true, message: '请选择维修动作', trigger: 'change' }
        ],
        maintenanceMan: [
          { required: true, message: '请填写维修员编号', trigger: 'blur' }
        ]
      },
      maintainContent: {
        jobNumber: '',
        maintenanceContents: '',
        startProcessTime: ''
      }
    }
  },
  created() {
    this.getMaintainer()
    this.getData()
  },
  methods: {
    getMaintainer() {
      getAllMaintainerInfo().then(({ data }) => {
        this.maintainers = data.page.records
      })
    },
    getData() {
      getAllFaultInfo().then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
        this.isShow1 = false
        this.Form.name = ''
      })
    },
    onSubmit() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          getNoFaultInfo(this.Form.name).then(({ data }) => {
            if (data.page.total === 0) {
              this.$message({
                showClose: true,
                message: '没有查询到相应的未安排维修的设备信息',
                type: 'error'
              })
            } else {
              this.total = data.page.total
              this.pageSize = data.page.size
              this.tableData = data.page.records
              this.isShow1 = true
            }
          })
        }
      })
    },
    handleDetail(row) {
      this.form_detail.maintenanceTurbine = row.faultTurbine
      this.form_detail.maintenanceMan = ''
      this.form_detail.maintenanceType = ''
      this.form_detail.maintenanceLevel = ''
      this.form_detail.maintenanceActio = ''
      this.form_detail.maintenanceTime = ''
      this.form_detail.date1 = ''
      this.form_detail.date2 = ''
      this.dialogVisible_detail = true
    },
    handleCurrentChange(pageNum) {
      getAllFaultInfo(pageNum).then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
      })
    },
    handleClose() {
      // 关闭弹窗
      this.dialogVisible_detail = false
    },
    cancel() {
      this.handleClose()
    },
    submit_detail() {
      this.form_detail.maintenanceTime = this.form_detail.date1 + ' ' + this.form_detail.date2
      this.form_detail.faultTurbine = this.form_detail.maintenanceTurbine
      this.maintainContent.jobNumber = this.form_detail.maintenanceMan
      this.maintainContent.maintenanceContents = '维修机组' + this.form_detail.maintenanceTurbine
      this.maintainContent.startProcessTime = this.form_detail.date1 + ' ' + this.form_detail.date2
      this.$refs.form_detail.validate((valid) => {
        if (valid) {
          addMaintain(this.form_detail).then(() => {
            updateFaultManange(this.form_detail).then(() => {
              editMaintainer2(this.maintainContent).then(() => {
                this.$message({
                  type: 'success',
                  message: '维修任务安排成功!'
                })
              })
            })
          })
          this.dialogVisible_detail = false
        }
      })
    }
  }
}
</script>

<style>
.app-container {
  margin: 0 auto;
}
</style>
